<template>
  <view class="usermanager-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 顶部数据统计卡片 -->
    <view class="stats-section">
      <!-- 近3月服务客户 -->
      <view class="stat-item">
        <text class="stat-value">{{ serviceCustomers }}</text>
        <view class="stat-label">
          <text>近3月服务客户</text>
          <view class="compare-tag">
            <text>超越{{ compareData.serviceRate }}%同行</text>
          </view>
        </view>
      </view>

      <!-- 近3月回头客 -->
      <view class="stat-item">
        <text class="stat-value">{{ returnCustomers }}</text>
        <view class="stat-label">
          <text>近3月回头客</text>
          <view class="compare-tag">
            <text>超越{{ compareData.returnRate }}%同行</text>
          </view>
        </view>
      </view>

      <!-- 近3月复购率 -->
      <view class="stat-item">
        <text class="stat-value">{{ repurchaseRate }}%</text>
        <view class="stat-label">
          <text>近3月复购率</text>
          <view class="compare-tag">
            <text>超越{{ compareData.repurchaseRate }}%同行</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 入驻信息卡片 -->
    <view class="join-info-card">
      <view class="join-text">
        <text class="label">您已入驻到位</text>
        <text class="days">{{ joinDays }}天</text>
      </view>
      <text class="encourage-text">感谢您的劳动与付出，我们一起继续加油吧～</text>
    </view>

    <!-- 功能按钮区域 -->
    <view class="function-grid">
      <!-- 客户关注 -->
      <view class="function-item" @tap="goToFollowers">
        <view class="main-info">
          <text class="title">客户关注</text>
          <text class="value">{{ followers }}位客户已关注您</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>

      <!-- 客户评论 -->
      <view class="function-item" @tap="goToReviews">
        <view class="main-info">
          <text class="title">客户评论</text>
          <text class="value">当前好评率{{ goodReviewRate }}%</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>

      <!-- 客户分布 -->
      <view class="function-item" @tap="goToDistribution">
        <view class="main-info">
          <text class="title">客户分布</text>
          <text class="value">客户位置热点图</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>

      <!-- 时段分布 -->
      <view class="function-item" @tap="goToTimeAnalysis">
        <view class="main-info">
          <text class="title">时段分布</text>
          <text class="value">服务时段热点图</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      // 统计数据
      serviceCustomers: 0,
      returnCustomers: 0,
      repurchaseRate: 0,
      compareData: {
        serviceRate: 0,
        returnRate: 0,
        repurchaseRate: 0
      },
      joinDays: 0,
      followers: 0,
      goodReviewRate: 0
    }
  },

  onLoad() {
    this.loadUserStats()
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    // 加载用户统计数据
    async loadUserStats() {
      uni.showLoading({
        title: '加载中...'
      })

      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/member/user-stats`,
          method: 'GET',
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          const data = result.data.data
          this.serviceCustomers = data.serviceCustomers
          this.returnCustomers = data.returnCustomers
          this.repurchaseRate = data.repurchaseRate
          this.compareData = data.compareData
          this.joinDays = data.joinDays
          this.followers = data.followers
          this.goodReviewRate = data.goodReviewRate
        }
      } catch (err) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 跳转到客户关注页面
    goToFollowers() {
      uni.navigateTo({
        url: '/pages/technician/followers'
      })
    },

    // 跳转到客户评论页面
    goToReviews() {
      uni.navigateTo({
        url: '/pages/technician/reviews'
      })
    },

    // 跳转到客户分布页面
    goToDistribution() {
      uni.navigateTo({
        url: '/pages/technician/distribution'
      })
    },

    // 跳转到时段分布页面
    goToTimeAnalysis() {
      uni.navigateTo({
        url: '/pages/technician/time-analysis'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.usermanager-container {
  min-height: 100vh;
  background: #F5F5F5;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .right {
      width: 88rpx;
    }
  }

  .stats-section {
    padding: 30rpx;
    background: linear-gradient(180deg, #00C6B9 0%, #00A7B9 100%);
    color: #FFFFFF;

    .stat-item {
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .stat-value {
        font-size: 48rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }

      .stat-label {
        display: flex;
        align-items: center;
        gap: 20rpx;

        text {
          font-size: 28rpx;
        }

        .compare-tag {
          background: rgba(255, 255, 255, 0.2);
          border-radius: 20rpx;
          padding: 4rpx 12rpx;
          
          text {
            font-size: 24rpx;
          }
        }
      }
    }
  }

  .join-info-card {
    margin: 20rpx 30rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .join-text {
      margin-bottom: 10rpx;

      .label {
        font-size: 28rpx;
        color: #333333;
      }

      .days {
        font-size: 28rpx;
        color: #00C6B9;
        margin-left: 10rpx;
      }
    }

    .encourage-text {
      font-size: 26rpx;
      color: #666666;
    }
  }

  .function-grid {
    margin: 20rpx 30rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .function-item {
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .main-info {
        .title {
          font-size: 32rpx;
          color: #333333;
          font-weight: 500;
          margin-bottom: 10rpx;
          display: block;
        }

        .value {
          font-size: 26rpx;
          color: #666666;
        }
      }

      .iconfont {
        font-size: 32rpx;
        color: #999999;
      }

      &:nth-child(1) {
        background: linear-gradient(135deg, #FF6B6B 0%, #FF4B4B 100%);
        .title, .value {
          color: #FFFFFF;
        }
        .iconfont {
          color: #FFFFFF;
        }
      }

      &:nth-child(2) {
        background: linear-gradient(135deg, #FF9500 0%, #FF7B00 100%);
        .title, .value {
          color: #FFFFFF;
        }
        .iconfont {
          color: #FFFFFF;
        }
      }

      &:nth-child(3) {
        background: linear-gradient(135deg, #4B7BFF 0%, #2B85E4 100%);
        .title, .value {
          color: #FFFFFF;
        }
        .iconfont {
          color: #FFFFFF;
        }
      }

      &:nth-child(4) {
        background: linear-gradient(135deg, #A64BFF 0%, #8B2BE4 100%);
        .title, .value {
          color: #FFFFFF;
        }
        .iconfont {
          color: #FFFFFF;
        }
      }
    }
  }
}
</style> 